<template>
  <wd-config-provider
    :themeVars="themeVars"
    class="layout-content flex-column"
    :style="{ marginTop: safeAreaInsets?.top + 'px', backgroundColor: props.bgc }"
  >
    <view class="layout-main flex1 flex-column">
      <slot />
    </view>
    <view class="layout-footer flex-center p-30">
      <slot name="footer" />
    </view>
    <wd-toast />
    <wd-message-box />
    <wd-notify />
    <scanCode />
  </wd-config-provider>
</template>

<script lang="ts" setup>
import type { ConfigProviderThemeVars } from 'wot-design-uni'
import scanCode from '@/components/scancode.vue'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const props = defineProps({
  /** 背景色 */
  bgc: {
    type: String,
    default: '#fff',
  },
  /** 是否验证登录状态 */
  isValidateLogin: {
    type: Boolean,
    default: true,
  },
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const themeVars: ConfigProviderThemeVars = {
  // colorTheme: 'red',
  // buttonPrimaryBgColor: '#07c160',
  // buttonPrimaryColor: '#07c160',
}

onShow(() => {
  const token = userInfo.value.token
  // console.log('userInfo', userInfo)
  // console.log('token', token)
  if (!token) {
    uni.navigateTo({
      url: '/pages/login/index',
    })
  }
})
</script>
<style lang="scss">
.layout-content {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  .layout-main {
    width: 100%;
    overflow: hidden;
  }
}
</style>
